<template>
  <div class="notice-page-root">
<!--    <lottie-player-->
<!--      src="https://assets2.lottiefiles.com/packages/lf20_2glqweqs.json"-->
<!--      background="transparent"-->
<!--      speed="1"-->
<!--      style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0.18;"-->
<!--      loop-->
<!--      autoplay-->
<!--    />-->
<!--    <div class="bg-blur-spot"></div>-->
<!--    <div class="bg-blur-spot2"></div>-->
<!--    <div class="lottie-notice-wrap">-->
<!--      <lottie-player-->
<!--        src="https://assets2.lottiefiles.com/packages/lf20_4kx2q32n.json"-->
<!--        background="transparent"-->
<!--        speed="1"-->
<!--        style="width: 120px; height: 120px; margin: 0 auto;"-->
<!--        loop-->
<!--        autoplay-->
<!--      />-->
<!--    </div>-->
    <div class="notice-title">欢迎来到权限管理页面</div>
    <v-card class="notice-card mx-auto" elevation="12">
      <div class="notice-carousel-title">
        <v-icon color="primary" size="28">mdi-bullhorn-variant</v-icon>
        <span>公告轮播</span>
      </div>
      <v-carousel
        v-if="notices.length"
        height="220"
        hide-delimiter-background
        cycle
        interval="4000"
        show-arrows="hover"
        class="notice-carousel"
      >
        <v-carousel-item v-for="notice in notices" :key="notice.id">
          <v-sheet
            class="d-flex flex-column align-center justify-center mx-auto animated-sheet"
            color="primary-lighten-5"
            elevation="6"
            rounded
            height="180"
            width="92%"
            style="padding: 24px; background: rgba(38,40,48,0.92); box-shadow: 0 8px 32px 0 rgba(60,60,80,0.22);"
          >
            <div class="notice-anim-icon">
              <lottie-player
                src="https://assets2.lottiefiles.com/packages/lf20_2ks3pjua.json"
                background="transparent"
                speed="1"
                style="width: 48px; height: 48px;"
                loop
                autoplay
              />
            </div>
            <div class="notice-carousel-title2">{{ notice.title }}</div>
            <div class="notice-content">{{ notice.content }}</div>
            <div class="notice-time">发布时间：{{ notice.create_time || notice.createTime || '' }}</div>
          </v-sheet>
        </v-carousel-item>
      </v-carousel>
      <div v-else class="no-notice">暂无已发布公告</div>
    </v-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNoticeList } from '@/api/auth'
// LottiePlayer全局引入

const notices = ref([])

function fetchPublishedNotices() {
  getNoticeList({ status: 1, pageNum: 1, pageSize: 10 }).then(res => {
    notices.value = res.data.list || []
  })
}

onMounted(fetchPublishedNotices)
</script>

<style scoped>
.notice-page-root {
  min-height: 100vh;
  background: #18191c;
  padding: 48px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.bg-blur-spot {
  position: absolute;
  left: 10vw;
  top: 10vh;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #23243a 0%, #23243a 80%);
  opacity: 0.18;
  filter: blur(60px);
  z-index: 0;
}
.bg-blur-spot2 {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, #23243a 0%, #23243a 80%);
  opacity: 0.13;
  filter: blur(60px);
  z-index: 0;
}
.lottie-notice-wrap {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.notice-title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin-bottom: 36px;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.22);
  z-index: 1;
}
.notice-card {
  background: rgba(36,37,42,0.98);
  border-radius: 22px;
  box-shadow: 0 12px 48px 0 rgba(60,60,80,0.28), 0 2px 8px 0 #23243a;
  padding: 48px 0 48px 0;
  margin-bottom: 32px;
  width: 70vw;
  max-width: 1200px;
  min-width: 480px;
  z-index: 1;
}
.notice-carousel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #40c4ff;
  margin-bottom: 22px;
  letter-spacing: 1px;
}
.notice-carousel {
  margin-top: 0;
}
.animated-sheet {
  animation: fadeInUp 0.7s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.notice-anim-icon {
  margin-bottom: 8px;
}
.notice-carousel-title2 {
  font-size: 22px;
  font-weight: bold;
  color: #40c4ff;
  margin-bottom: 8px;
  text-align: center;
}
.notice-content {
  font-size: 17px;
  color: #e0e0e0;
  margin-bottom: 8px;
  text-align: center;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-time {
  font-size: 14px;
  color: #b0bec5;
  margin-top: 10px;
  text-align: center;
}
.no-notice {
  text-align: center;
  color: #aaa;
  padding: 32px 0;
  font-size: 18px;
}
</style>
